<template>
  <div class="geren_to">
    <!---->
    <div id="header">
      <ul id="header_top2">
        <li>
          <img src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/左上角邮箱.png" alt="">
        </li>
        <li>
          个人中心
        </li>
        <li @click="toXiaoxi">
          <img src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/liaotiantubiao.png" alt="">
        </li>
        <li>
          <img @click="doShezhi" src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/shezhitubiao.png" alt="">
        </li>
      </ul>
    </div>
    <!---->
    <div class="geren_touxiang">
    <div class="tou_ming">
      <div class="touxiang">
      </div>
      <span>昵称</span>

    </div>
      <div @click="doZhang" class="zhanghu">账户提现</div>

    </div>
    <!--我的订单-->
    <div class="myOrder">
      <span>我的订单</span>
      <span>查看所有订单<img src="../../assets/Aladeng_img/5_gerenzhongxin/shezhi/gerenxinxi/youjiantou.png" alt=""></span>
    </div>
    <!--订单信息-->
    <div>
      <ul class="dingdan">
        <li v-for="item in aMogo1">
          <img :src="item.imgUrl" alt="">
          <div>{{item.title}}</div>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--返金-->
    <div class="myOrder">
      <span>我的返金排号</span>
      <span @click="doPaihang">查看更多 <img src="../../assets/Aladeng_img/5_gerenzhongxin/shezhi/gerenxinxi/youjiantou.png" alt=""></span>
    </div>
    <!---->
    <div>
      <ul class="paihang">
        <li v-for="item in aMogo2">
          <div>{{item.title}}</div>
          <div>消费 : ¥ {{item.qian}}</div>
          <div>排号 : {{item.nb}}</div>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--优惠积分-->
    <div>
      <ul class="dingdan">
        <li @click="doXin(index)" v-for="(item, index) in aMogo3">
          <span >{{item.nb}}</span>
          <div>{{item.title}}</div>
        </li>
      </ul>
    </div>
    <!---->
    <div>
      <!--<ul class="dingdan" @click="toLink(index)">-->
        <!--<li v-for="(item, index) in aMogo4">-->
          <!--<img :src="item.imgUrl" alt="">-->
          <!--<div>{{item.title}}</div>-->
        <!--</li>-->
      <!--</ul>-->
      <ul class="dingdan">
        <li><img src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/shimingrenzhneg.png" alt="">
            <div>实名认证</div>
        </li>
        <li>
          <img src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/daifahuo.png" alt="">
          <div>收货地址</div>
        </li>
        <li  @click="toLink">
          <img src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/guanzhugongzhonghao.png" alt="">
          <div>关注公众号</div>
        </li>
        <li>
          <img src="../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/kehufankui.png" alt="">
            <div>客服与反馈</div>
        </li>
      </ul>
    </div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <!--灰色间隔-->
    <div class="jiange"></div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import MyFooter from '../home/MyFooter/MyFooter.vue'
  export default {
    data(){
      return{
        aMogo1:[
          {
            imgUrl: require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/daizhifu.png'),
            title:'待支付'
          },
          {
            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/daifahuo.png'),
            title:'待发货'
          },
          {
            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/daishouhuo.png'),
            title:'待收货'
          },
          {
            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/jiaoyiwancheng.png'),
            title:'交易完成'
          }
        ],
        aMogo2:[
          {
            title:'2017/06/26',
            qian:'100',
            nb:'10'
          },
          {
            title:'2017/06/26',
            qian:'100',
            nb:'10'
          },
          {
            title:'2017/06/26',
            qian:'100',
            nb:'10'
          },
          {
            title:'2017/06/26',
            qian:'100',
            nb:'10'
          }
        ],
        aMogo3:[
          {
            nb:'0',
            title:'我的神灯值',

          },
          {
            nb:'0',
            title:'我的积分'
          },
          {
            nb:'0',
            title:'我的优惠券'
          },
          {
            nb:'0',
            title:'我的心得',
            to:'/myxinde'
          }
        ],
//        aMogo4:[
//          {
//            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/shimingrenzhneg.png') ,
//            title:'实名认证'
//          },
//          {
//            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/shouhuodizhi.png'),
//            title:'收货地址'
//          },
//          {
//            linkto: '/guanzhu',
//            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/guanzhugongzhonghao.png'),
//            title:'关注公众号'
//          },
//          {
//            imgUrl:require('../../assets/Aladeng_img/5_gerenzhongxin/gerenzhongxin/kehufankui.png'),
//            title:'客服与反馈',
//            linkto: '/customer'
//          }
//        ],
      }
    },
    methods: {
      toLink(){
        this.$router.push({name: 'guanzhu'});
        window.scrollTo(0,0);
      },
      toXiaoxi(){
        this.$router.push({name: 'message'});
        window.scrollTo(0,0);
      },
      doXin(index){
        this.$router.push(this.aMogo3[index].to);
        window.scrollTo(0,0);
      },
      doPaihang(){
        this.$router.push('/fanjin');
        window.scrollTo(0,0);
      },
      doZhang(){
        this.$router.push('/zhanghu');
        window.scrollTo(0,0);
      },
      doShezhi(){
        this.$router.push('/shezhi');
        window.scrollTo(0,0);
      }
    },
    components: {
      MyFooter
    }
  }
</script>
<style scoped>
  .geren_to{
    margin-bottom: 5rem;
  }
  #header {
    width: 100%;
    height: 4rem;
    background: #e53e42;
  }
  #header_top2 {
    width: 100%;
    display: flex;
    padding-top: 1.5rem;
    padding-bottom: 1.3rem;
  }
  #header_top2 li{
    text-align: center;
    color: #ffffff;
    font-weight: 200;
  }
  #header_top2 li img{
    width: 1.5rem;
  }
  #header_top2 li:nth-child(1){
    flex:1;

  }
  #header_top2 li:nth-child(2){
    flex:10;
    font-size: 1.5rem;
  }
  #header_top2 li:nth-child(3){
    flex:1;
  }
  #header_top2 li:nth-child(4){
    flex:1;
  }
  /*头像蓝*/
.geren_touxiang{
  /*width: 22rem;*/
  height: 8rem;
  background-color: #fee3e3;
  padding-right: 2rem;
}
.tou_ming{
  padding: 1rem 1rem 0 1rem;
}
  .touxiang{
    width: 3rem;
    height: 3rem;
    background-color: #e38e8e;
    border-radius: 3rem;
    display: inline-block;
  }
  .geren_touxiang span{
    font-size: 1rem;
    font-weight: 200;
    color: #4d4d4d;
    vertical-align: 1rem;
  }
  .zhanghu{
    margin-top: 1rem;
    background-color: #d26060;
    border-radius: 5rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    width: 5rem;
    height: 1.2rem;
    font-weight: 200;
    text-align: center;
    color: #ffffff;
    float: right;
  }
/*我的订单*/
  .myOrder{
    color: #4d4d4d;
    font-size:1.3rem;
    font-weight: 200;
    padding: 0.5rem;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
  }
  .myOrder img{
    margin-left: 0.3rem;
    height: 1rem;
  }
  .myOrder span:nth-child(1){
  float: left;
  }
  .myOrder span:nth-child(2){
    float: right;
  }
  .dingdan{
    display: flex;
    text-align: center;
    font-size: 0.8rem;
    color: #4d4d4d;
    padding: 0.8rem 0;
    font-weight: 200;
    border-bottom: 1px solid #cccccc;
  }
  .dingdan img{
    width: 1.5rem;
    height: 1.5rem;

  }
  .dingdan span{
    color: #e53e42;
    font-size: 1rem;
    display: inline-block;
    padding: 0.5rem 0;
  }
  .dingdan li{
    flex: 1;
  }
  .jiange{
    background-color: #f2f2f2;
    width: 100%;
    height: 0.8rem;
  }
  .paihang{
    color: #4d4d4d;
    font-size:1.5rem;
    font-weight: 200;

  }
  .paihang li {
    display: flex;
    padding: 1rem 0 1rem 0;
    border-bottom: 1px solid #cccccc;
  }
  .paihang li div{
    flex: 1;
    text-align: center;
  }

</style>
